<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta charset="UTF-8">
		<title>BSTEK-MIS</title>
		<div th:replace="/frame/lib/common/common :: bootCSS"></div>
		<link rel="stylesheet" type="text/css" th:href="@{/frame/page/main/main.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/frame/resource/css/iconfont.css}">
	</head>
	<body style="height: 100%">
		<div id="app" style="height: 100%" v-cloak="v-cloak">
			<el-container style="height:100%">
				<el-header style="height:40px;background-color:#293846;">
					<el-row>
						<el-col :span="elColLeft">
							<el-menu style="background-color:#293846;line-height:40px;width:100%;height:40px;border-bottom:0px;"
							 default-active="0"  mode="horizontal"> <template style="background-color:#293846;line-height:40px;width:100%;height:40px;border-bottom:0px;">
									<el-menu-item  v-for="headMenu,index in headMenus" :index="String(index)" :key="headMenu.id" @click="getMenuList(headMenu.id)"
									 style="line-height:40px;font-size:16px;color:white;height:40px;">
									 <label  style="display: inline-block;width:20px;height:20px;" :style="{background:changeUrl(headMenu.icon),backgroundImage:changeUrl(headMenu.icon)}"></label>
										{{headMenu.name}} </el-menu-item>
								</template> </el-menu>
						</el-col>
						<el-col :span="elColRight" style="text-align:right;padding-top:10px">
							<el-tooltip class="item" effect="drak" content="修改密码" placement="bottom">
								<el-button @click="showDialog('md')" style="color: #293846;background-color: #fff; border-color: #fff;" circle
								 size="mini" icon="iconfont icon-lock"></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="drak" content="退出" placement="bottom">
								<el-button @click="showDialog('out')" style="color: #293846;background-color: #fff; border-color: #fff;" circle
								 size="mini" icon="iconfont icon-logout"></el-button>
							</el-tooltip>
						</el-col>
					</el-row>
					<el-row>
				</el-header>
				<el-main style="height:calc(100% - 75px)">
					<el-container style="height:100%">
						<el-aside style="height:100% ;background-color:#293846" :class="collapsed?'menu-collapsed':'menu-expanded'">
							<el-col style="text-align:center;">
								<el-button id="btn-collapse" class="el-btn-collapsed" @click="collapse" size="mini" icon="iconfont icon-indent"></el-button>
							</el-col>
							<el-col>
					 <el-menu :default-active="activeMenuIndex" class="el-menu-vertical-demo"  :collapse="collapsed" @open="handleOpen" @close="handleClose" background-color="#293846" text-color="#fff" active-text-color="#ffd04b" >
							<multi-menu :drop-down-data="menus" :collapsed="collapsed"></multi-menu> 
							
						</el-menu>
							</el-col>
						</el-aside>
						<el-main style="height:100%">
							<div style="height: 100%">
							 <!-- 右击tab的菜单 -->
							 	<div v-show="menuVisible">
					                <ul id="menu" class="el-dropdown-menu el-popper tab-menu el-dropdown-selfdefine">
					                    <li class="el-dropdown-menu__item" @click="closeTabs('1')"><label ></label><span >关闭</span></li>
					                    <li class="el-dropdown-menu__item" @click="closeTabs('2')"><label ></label><span >关闭其他</span></li>
					                    <li class="el-dropdown-menu__item" @click="closeTabs('3')"><label ></label><span>关闭所有</span></li>
					                </ul>
					            </div>
								<!-- tabs页面 -->
								<el-tabs closable v-model="activeName" type="card" @tab-remove="removeTab" style="height:100%">
									<el-tab-pane style="height:100%" v-for="(item,index) in editableTabs" :key="item.name" :label="item.title"
									 :name="item.name" v-html="item.content" >
									 <span slot="label" @contextmenu.prevent="rightMenu(item)" style="position:relative;bottom:2px;"><span style="display: inline-block;width:20px;height:20px;position:relative;top:6px" :style="{background:changeUrl(item.icon),backgroundImage:changeUrl(item.icon)}"></span>{{ item.title }}</span>
									</el-tab-pane>
								</el-tabs>
							</div>
						</el-main>
					</el-container>
				</el-main>
				<el-footer style="height:16px;border:1px solid rgb(204, 204, 204)">
					<el-col style="height:100%; font-size:12px"> 登录人 : <i th:text=${username}></i>(<i th:text=${nickname}></i>)
					</el-col>
				</el-footer>
			</el-container>
			<el-dialog title="提示" :visible.sync="logout_dilaogVisible" :width='logoutWidth' >
				<i class="iconfont icon-question" style="font-size: 50px; color: #409eff"></i> <span style="font-size: 18px;">您真的要退出当前系统吗?</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="logout_dilaogVisible=false">取消</el-button>
					<el-button @click="logout" type="primary">确定</el-button>
				</span> </el-dialog>
			<el-dialog title="修改密码" :visible.sync="mdf_dilaogVisible" :width="modifyPwdWidth" :before-close="dialogBerforeClose">
				<el-form :model="passwordForm" :rules="rules1" ref="passwordForm">
					<el-form-item label="旧密码" label-width="120px" prop="oldPassword">
						<el-input type="password" v-model="passwordForm.oldPassword"></el-input>
					</el-form-item>
					<el-form-item label="新密码" label-width="120px" prop="newPassword">
						<el-input type="password" v-model="passwordForm.newPassword"></el-input>
					</el-form-item>
					<el-form-item label="确认新密码" label-width="120px" prop="okNewPassword">
						<el-input type="password" v-model="passwordForm.okNewPassword"></el-input>
					</el-form-item>
				</el-form> <span slot="footer" class="dialog-footer">
					<el-button @click="closeDialog">取消</el-button>
					<el-button @click="updatePassWord(passwordForm)" type="primary">确定</el-button>
				</span>
			</el-dialog>
		</div>
		<div th:replace="/frame/lib/common/common :: bootJS"></div>
		<script type="text/javascript" th:src='@{/frame/lib/common/common.js}'></script>
		<script type="text/javascript" th:src='@{/frame/page/main/main.js}'></script>
	</body>
</html>
